<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>msg:{{ msg}}</p>
        <input type="button" name="" id="" value="修改" @click="changeMsg">
        <p>str:{{ str}}</p>
        <input type="button" name="" id="" value="修改" @click="changeStr  ">
    </div>
</body>
<script src="./vue.global.js"></script>
<script>

const app = Vue.createApp({
    data(){
        return{
            msg:'hello',
            str:'hi',
        }
    },
    methods:{
        changeMsg(){
            this.msg+="1";
        },
        changeStr(){
            this.str+="1";
        }
    },
    // renderTracked 的调用时机， 当好数据渲染到模块上时， 每个数据都会调一次 renderTracked
    // renderTracked 函数的参数，event 里的 key 表示当前的数据

    renderTracked(event){
        console.log("renderTracked",event)
        console.log("renderTracked:event.key",event.key)
    },

    renderTriggered(event){
        console.log("renderTiggered: event.key",event.key);

    }


})
app.mount("#app")
</script>
</html>